<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动-个人中心</title>
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/person_center.css">
    <style>
        /* 设置表格内容居中显示 */
        #record table {
            text-align: center;
            margin: 0 auto; /* 水平居中 */
        }

        /* 设置表头单元格样式 */
        #record table th {
            border: 1px solid black;
            padding: 5px;
        }

        /* 设置普通单元格样式 */
        #record table td {
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
<section class="shortcut">
    <div class="w">
        <div class="fl">
            <ul>
                <li>欢迎来到移动网站 &nbsp;</li>
            </ul>
        </div>
        <div class="fr">
            <ul>
                <li><button id="personalCenterBtn">个人中心</button></li>
                <li></li>
                <li><a href="https://www.10086.cn/cmccclient/indexc_new.html" id="clientLink"
                       target="_blank">客户端下载</a></li>
                <li></li>
                <li>客服服务</li>
            </ul>
        </div>
    </div>
</section>
<header class="header w">
    <div class="logo">
        <h1>
            <a href="index.html" title="移动营业厅">移动营业厅</a>
        </h1>
    </div>
    <div class="download">
        <img src="/images/123.jpg">
        <p>扫一扫，下载app</p>
    </div>
</header>
<div class="container w">
    <div class="sidebar">
        <ul class="tab">
            <li class="active" data-target="person_bill">个人账户</li>
            <li data-target="traffic">-- 套餐余额查询</li>
            <li data-target="bill">-- 话费余额查询</li>
            <li data-target="order">-- 订单查询</li>
            <li data-target="package">-- 套餐查询</li>
            <li data-target="record">-- 维修记录查询</li>
            <li data-target="block">-------------</li>
            <li data-target="my_information">我的信息</li>
            <li data-target="person_information">-- 个人信息</li>
            <li data-target="safe">-- 安全设置</li>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
        </ul>
    </div>
    <div class="content">
        <div id="traffic" class="tab-content" style="display: none;">
            <div>
                <p>你的手机号码是: <span id="phoneNumber"></span></p>
            </div>
            <strong style="font-size: 20px;">套餐余额查询</strong>
            <p>&nbsp;</p>
            <p id="packageName" style="background-color: black; color: white; padding: 5px;"></p>
            <p>&nbsp;</p>
            <p>套餐流量总数： </p> <p id="packageDataLimit1"></p>
            <div style="position: relative; width: 100%; background-color: sandybrown; height: 20px; margin-top: 10px; border-radius: 10px;">
                <div style="width: 100%; background-color: greenyellow; height: 100%; border-radius: 10px 0 0 10px; position: relative;">
                    <div style="position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: greenyellow; border-radius: 50%;"></div>
                </div>
            </div>
            <p>余额：  </p><p id="packageDataLimit2"></p>
            <p>&nbsp;</p>
            <p>套餐语音总数： 500 分钟</p>
            <div style="position: relative; width: 100%; background-color: sandybrown; height: 20px; margin-top: 10px; border-radius: 10px;">
                <div style="width: 96%; background-color: greenyellow; height: 100%; border-radius: 10px 0 0 10px; position: relative;">
                    <div style="position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: greenyellow; border-radius: 50%;"></div>
                </div>
            </div>
            <p>余额：  480 分钟</p>
            <p>&nbsp;</p>
            <p style="background-color: black; color: white; padding: 5px;">免费赠送5GB流量包</p>
            <p>&nbsp;</p>
            <p>套餐流量总数： 5 GB</p>
            <div style="position: relative; width: 100%; background-color: sandybrown; height: 20px; margin-top: 10px; border-radius: 10px;">
                <div style="width: 80%; background-color: greenyellow; height: 100%; border-radius: 10px 0 0 10px; position: relative;">
                    <div style="position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: greenyellow; border-radius: 50%;"></div>
                </div>
            </div>
            <p>余额：  4 GB</p>
            <p>&nbsp;</p>
            <p>套餐语音总数： 50 分钟</p>
            <div style="position: relative; width: 100%; background-color: sandybrown; height: 20px; margin-top: 10px; border-radius: 10px;">
                <div style="width: 100%; background-color: greenyellow; height: 100%; border-radius: 10px 0 0 10px; position: relative;">
                    <div style="position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: greenyellow; border-radius: 50%;"></div>
                </div>
            </div>
            <p>余额：  50 分钟</p>
        </div>
        <div id="bill" class="tab-content" style="display: none;">
            <!-- 话费查询内容 -->
            <strong style="font-size: 20px;">话费余额查询</strong>
            <p>&nbsp;</p>
            <p style="background-color: black; color: white; padding: 5px;">话费余额：30 元</p>
            <p>&nbsp;</p>
            <strong style="font-size: 20px;">充值记录</strong>
            <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
                <tr>
                    <th style="border: 1px solid black; padding: 5px;">金额</th>
                    <th style="border: 1px solid black; padding: 5px;">说明</th>
                    <th style="border: 1px solid black; padding: 5px;">日期</th>
                </tr>
                <tr>
                    <td style="border: 1px solid black; padding: 5px;">-59 元</td>
                    <td style="border: 1px solid black; padding: 5px;">畅玩卡2</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-05-15</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black; padding: 5px;">69 元</td>
                    <td style="border: 1px solid black; padding: 5px;">充值</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-05-15</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black; padding: 5px;">-59 元</td>
                    <td style="border: 1px solid black; padding: 5px;">畅玩卡2</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-04-15</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black; padding: 5px;">69 元</td>
                    <td style="border: 1px solid black; padding: 5px;">充值</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-04-13</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black; padding: 5px;">-59 元</td>
                    <td style="border: 1px solid black; padding: 5px;">畅玩卡2</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-03-15</td>
                </tr>

                <tr>
                    <td style="border: 1px solid black; padding: 5px;">69 元</td>
                    <td style="border: 1px solid black; padding: 5px;">充值</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-03-14</td>
                </tr>
            </table>
            <div id="pagination" style="text-align: center; margin-top: 20px;">
                <span>1</span>
            </div>
        </div>
        <div id="order" class="tab-content" style="display: none;">
            <strong style="font-size: 20px;">订单查询</strong>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p style="background-color: black; color: white; padding: 5px;">您本月共消费：69 元</p>
            <p>&nbsp;</p>
            <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
                <tr>
                    <th style="border: 1px solid black; padding: 5px;">消费金额</th>
                    <th style="border: 1px solid black; padding: 5px;">消费说明</th>
                    <th style="border: 1px solid black; padding: 5px;">消费日期</th>
                </tr>
                <tr>
                    <td style="border: 1px solid black; padding: 5px;">59 元</td>
                    <td style="border: 1px solid black; padding: 5px;">畅玩卡2</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-05-15</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black; padding: 5px;">69 元</td>
                    <td style="border: 1px solid black; padding: 5px;">话费充值</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-05-15</td>
                </tr>
            </table>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p style="background-color: black; color: white; padding: 5px;">往期消费记录</p>
            <p>&nbsp;</p>
            <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
                <tr>
                    <th style="border: 1px solid black; padding: 5px;">消费金额</th>
                    <th style="border: 1px solid black; padding: 5px;">消费说明</th>
                    <th style="border: 1px solid black; padding: 5px;">消费日期</th>
                </tr>
                <tr>
                    <td style="border: 1px solid black; padding: 5px;">59 元</td>
                    <td style="border: 1px solid black; padding: 5px;">畅玩卡2</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-04-15</td>
                </tr>

                <tr>
                    <td style="border: 1px solid black; padding: 5px;">50 元</td>
                    <td style="border: 1px solid black; padding: 5px;">话费充值</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-04-13</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black; padding: 5px;">59 元</td>
                    <td style="border: 1px solid black; padding: 5px;">畅玩卡2</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-03-15</td>
                </tr>

                <tr>
                    <td style="border: 1px solid black; padding: 5px;">69 元</td>
                    <td style="border: 1px solid black; padding: 5px;">话费充值</td>
                    <td style="border: 1px solid black; padding: 5px;">2024-03-14</td>
                </tr>
            </table>
        </div>
        <div id="package" class="tab-content" style="display: none;">
            <strong style="font-size: 20px;">套餐查询</strong>
            <p>&nbsp;</p>
            <p id="packageName2" style="background-color: black; color: white; padding: 5px;"></p>
            <p>&nbsp;</p>
            <p>套餐有效时间： 9 个月</p>
            <div style="position: relative; width: 100%; background-color: sandybrown; height: 20px; margin-top: 10px; border-radius: 10px;">
                <div style="width: 33.33%; background-color: greenyellow; height: 100%; border-radius: 10px 0 0 10px; position: relative;">
                    <div style="position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: greenyellow; border-radius: 50%;"></div>
                </div>
            </div>
            <p>套餐已生效时间：  3 个月</p>
            <p>&nbsp;</p>
            <p style="background-color: black; color: white; padding: 5px;">免费赠送5GB流量包</p>
            <p>&nbsp;</p>
            <p>套餐有效时间： 12 个月</p>
            <div style="position: relative; width: 100%; background-color: sandybrown; height: 20px; margin-top: 10px; border-radius: 10px;">
                <div style="width: 25%; background-color: greenyellow; height: 100%; border-radius: 10px 0 0 10px; position: relative;">
                    <div style="position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: greenyellow; border-radius: 50%;"></div>
                </div>
            </div>
            <p>套餐已生效时间：  3 个月</p>
        </div>
        <div id="record" class="tab-content" style="display: none;">
            <strong style="font-size: 20px;">维修记录查询</strong>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
                <tr>
                    <th style="border: 1px solid black; padding: 5px;">维修类型</th>
                    <th style="border: 1px solid black; padding: 5px;">预约时间</th>
                    <th style="border: 1px solid black; padding: 5px;">评价</th>
                </tr>
            </table>
        </div>
        <div id="person_information" class="tab-content" >
            <strong style="font-size: 20px;">个人信息</strong>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <strong style="font-size: 20px;">手机号码： </strong><span id="number"></span>
            <p>&nbsp;</p>
            <strong style="font-size: 20px;">身份证号： </strong><span id="idCardNumber"></span>
            <p>&nbsp;</p>

            <div id="info-container">
                <p>&nbsp;</p>
                <strong style="font-size: 20px;">用户名：<span id="username"></span></strong>
                <button onclick="editInfo('username')">编辑</button>
                <p>&nbsp;</p>
                <strong style="font-size: 20px;">性别：<span id="gender">男</span></strong>
                <button onclick="editInfo('gender')">编辑</button>
                <p>&nbsp;</p>
                <strong style="font-size: 20px;">电子邮箱：<span id="email">m18270511501@163.com</span></strong>
                <button onclick="editInfo('email')">编辑</button>
                <p>&nbsp;</p>
            </div>
            <button id="saveButton" style="display: none;" onclick="saveInfo()">完成</button>
        </div>
        <div id="safe" class="tab-content" style="display: none;">
            <strong style="font-size: 20px;">安全设置</strong>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <strong style="font-size: 20px;">请输入原密码：</strong>
            <input type="password" id="old-password" placeholder="请输入原密码">
            <p>&nbsp;</p>
            <strong style="font-size: 20px;">请输入修改密码：</strong>
            <input type="password" id="new-password" placeholder="请输入修改密码">
            <p>&nbsp;</p>
            <button onclick="changePassword()">确认修改</button>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tabs = document.querySelectorAll('.tab li');
        const tabContents = document.querySelectorAll('.tab-content');
        tabs.forEach(tab => {
            tab.addEventListener('click', function () {
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                const target = this.getAttribute('data-target');
                tabContents.forEach(content => content.style.display = 'none');
                document.getElementById(target).style.display = 'block';
            });
        });
    });
    function editInfo(field) {
        var fieldValue = document.getElementById(field).innerText;
        var inputField = document.createElement('input');
        inputField.setAttribute('type', 'text');
        inputField.setAttribute('id', 'edit-' + field);
        inputField.setAttribute('value', fieldValue);
        document.getElementById(field).innerText = '';
        document.getElementById(field).appendChild(inputField);
        document.getElementById(field).setAttribute('data-old-value', fieldValue);
        document.getElementById(field).style.border = '1px solid black';
        document.getElementById(field).style.padding = '3px';
        document.getElementById(field).style.display = 'inline';
        document.getElementById('saveButton').style.display = 'inline';
    }
    function saveInfo() {
        var fields = ['username', 'gender', 'email', 'address1'];
        fields.forEach(function (field) {
            var editedValue = document.getElementById('edit-' + field).value;
            document.getElementById(field).innerText = editedValue;
        });
        document.getElementById('saveButton').style.display = 'none';
        fields.forEach(function (field) {
            document.getElementById(field).style.border = '';
            document.getElementById(field).style.padding = '';
        });
    }
    function changePassword() {
        var oldPassword = document.getElementById('old-password').value;
        var newPassword = document.getElementById('new-password').value;
        alert("密码修改成功！");
    }


    window.onload = function() {
        var urlParams = new URLSearchParams(window.location.search);
        window.phoneNumber = urlParams.get('phone'); // 将 phoneNumber 存储为全局变量
        var phoneNumberElement = document.getElementById("phoneNumber");
        phoneNumberElement.textContent = phoneNumber;
        var phoneNumberElement = document.getElementById("number");
        phoneNumberElement.textContent = phoneNumber;
        fetch(`/getUserName?phoneNumber=${window.phoneNumber}`)
            .then(response => response.text())
            .then(data => {
                document.getElementById("username").textContent = data;
            })
            .catch(error => {
                console.error('Error:', error);
            });
        fetch(`/getIdCardNumber?phoneNumber=${window.phoneNumber}`)
            .then(response => response.text())
            .then(data => {
                document.getElementById("idCardNumber").textContent = data;
            })
            .catch(error => {
                console.error('Error:', error);
            });
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("packageName").innerText = xhr.responseText;
            }
        };
        xhr.open("GET", "/getPackageNameByPhoneNumber?phoneNumber=" + phoneNumber, true);
        xhr.send();
        var xhr2 = new XMLHttpRequest();
        xhr2.onreadystatechange = function() {
            if (xhr2.readyState === 4 && xhr2.status === 200) {
                document.getElementById("packageDataLimit1").innerText = xhr2.responseText;
            }
        };
        xhr2.open("GET", "/getPackageDataLimitByPhoneNumber?phoneNumber=" + phoneNumber, true);
        xhr2.send();
        var xhr3 = new XMLHttpRequest();
        xhr3.onreadystatechange = function() {
            if (xhr3.readyState === 4 && xhr3.status === 200) {
                document.getElementById("packageDataLimit2").innerText = xhr3.responseText;
            }
        };
        xhr3.open("GET", "/getPackageDataLimitByPhoneNumber?phoneNumber=" + phoneNumber, true);
        xhr3.send();
        var xhr4 = new XMLHttpRequest();
        xhr4.onreadystatechange = function() {
            if (xhr4.readyState === 4 && xhr4.status === 200) {
                document.getElementById("packageName2").innerText = xhr4.responseText;
            }
        };
        xhr4.open("GET", "/getPackageNameByPhoneNumber?phoneNumber=" + phoneNumber, true);
        xhr4.send();

        // 发起Ajax请求获取维修记录数据
        $.get("/repairRecords/" + phoneNumber, function(data) {
            var table = document.querySelector("#record table");

            data.forEach(function(record) {
                var row = table.insertRow(-1);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);

                cell1.innerHTML = record.issueType;
                cell2.innerHTML = record.appointmentDate;
                cell3.innerHTML = record.rating ? "已评价" : "未评价";
            });
        });
    };
</script>
</body>
</html>
